<template>
  <div>
    <breadcrumb>志愿表</breadcrumb>

    <school ref="school" @bindevent="getData"></school>
    <major ref="major" @bindevent="getData"></major>

    <!-- 导出PDF -->
    <popup ref="refPopup">
      <div class="pdf">
        <div class="pdf-content">
          <header>
            <h3>导出志愿表</h3>
          </header>
          <section>
            <dl>
              <dt>名称</dt>
              <dd>
                <el-input type='text' v-model="name"></el-input>
              </dd>
            </dl>
          </section>
          <footer>
            <button @click="getPdf(name);$refs.refPopup.init(false)">导出PDF</button>
          </footer>
        </div>
      </div>
    </popup>

    <section class="volunteer">
      <div class="volunteer-form">
        <h2 class="volunteer-title">
          <span>志愿表</span>
          <ul>
            <li @click="setData();isEdit=!isEdit" v-show="isEdit">编辑</li>
            <li @click="save()" v-show="!isEdit">保存</li>
            <li @click="$refs.refPopup.init()" v-show="isEdit">导出</li>
          </ul>
        </h2>
        <div class="volunteer-form--content" id="pdfDom">
          <section v-if="list[active] && (data=list[active])">
            <h3>
              <!-- <div class="title">{{data.enrollBatch.name}}</div> -->
              <el-select v-model="active" @change="tabsChange">
                <el-option
                  v-for="item in tabs"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </h3>
            <div class="null" v-if="!data.wishColleges">空</div>
            <transition-group name="colleges-list" tag="ul" v-else>
              <li v-for="(colleges, i) in data.wishColleges" :key="colleges.id">
                <dl v-if="!('show' in colleges) || colleges.show">
                  <dt>
                    <header>
                      <h4>{{colleges.college.name}}</h4>
                      <hgroup>
                        <i class="block-tag--gray">{{colleges.college.id}}</i>
                        <i v-if="colleges.chongShouBao" :class="'active block-tag--'+colleges.chongShouBao.id">
                          {{colleges.chongShouBao.name}} {{colleges.probability||'-'}}%
                        </i>
                      </hgroup>
                    </header>
                    <p>已选择<em class="c-blue">{{colleges.majorSelectNumber}}</em>/{{data.majorNumber}}个专业</p>
                    <ol class="tool" v-if="colleges.show">
                      <li>
                        <span v-if="data.wishColleges.indexOf(colleges) == 0">
                          <i class="icon icon-up c-ad"></i>
                        </span>
                        <span v-else @click="move(data.wishColleges, i, i-1)">
                          <i class="icon icon-up"></i>
                        </span>
                      </li>
                      <li>
                        <span v-if="(data.wishColleges.indexOf(colleges)+1) == data.wishColleges.length">
                          <i class="icon icon-down c-ad"></i>
                        </span>
                        <span v-else @click="move(data.wishColleges, i, i+1)">
                          <i class="icon icon-down"></i>
                        </span>
                      </li>
                      <li @click="del(data.wishColleges, i, colleges,0);colleges.show = !1">
                        <i class="icon icon-delete"></i>
                      </li>
                    </ol>
                    <div class='sub'>{{isEdit?sub[colleges['number']*1]:sub[i]}}</div>
                  </dt>
                  <transition-group name="major-list" tag="dd">
                    <div v-for="(major, j) in colleges.wishMajors" :key="major.id">
                      <div v-if="!('show' in major) || major.show" class="dd-box">
                        {{j+1}}、{{major.enrollStudentPlan.name}}
                        <hgroup>
                          <i class="block-tag--gray">{{major.id}}</i>
                          <i v-if="major.chongShouBao" :class="'active block-tag--'+major.chongShouBao.id">
                            {{major.chongShouBao.name}} {{major.probability||'-'}}%
                          </i>
                        </hgroup>
                        <ol class="tool" v-if="major.show">
                          <li>
                            <span v-if="colleges.wishMajors.indexOf(major) == 0">
                              <i class="icon icon-up c-ad"></i>
                            </span>
                            <span v-else @click="move(colleges.wishMajors, j, j-1)">
                              <i class="icon icon-up"></i>
                            </span>
                          </li>
                          <li>
                            <span v-if="(colleges.wishMajors.indexOf(major)+1) == colleges.wishMajors.length">
                              <i class="icon icon-down c-ad"></i>
                            </span>
                            <span v-else @click="move(colleges.wishMajors, j, j+1)">
                              <i class="icon icon-down"></i>
                            </span>
                          </li>
                          <li @click="del(colleges.wishMajors,j,major,1,colleges);major.show = !1">
                            <i class="icon icon-delete"></i>
                          </li>
                        </ol>
                      </div>
                      <div v-else @click="add(j, colleges)" class="major-null">
                        {{j+1}}、<span>+ 添加专业</span>
                      </div>
                    </div>
                  </transition-group>
                </dl>
                <div class="college-null" @click="add(i)" v-else>
                  <div>+</div>
                  <div>添加大学</div>
                  <div class='sub'>{{sub[i]}}</div>
                </div>
              </li>
            </transition-group>
          </section>
        </div>
      </div>

      <!-- 合理化建议 -->
      <right ref="refRight" style="position: relative; z-index:2;"></right>
    </section>
  </div>
</template>
<script>
import { api } from '@/utils'
import breadcrumb from '~/components/slot/breadcrumb'
import right from './right'
import school from './school'
import major from './major'
import { mapState } from 'vuex'
// import _ from 'lodash'
const COMPONENTS = {
  breadcrumb,
  right,
  school,
  major
}
export default{
  layout: 'zhiyuan-new',
  components: COMPONENTS,
  data () {
    return {
      name: '',
      sub: [],
      tabs: [],
      list: '',
      active: '',
      isEdit: !0 // 是否是编辑状态
    }
  },
  computed: {
    ...mapState({
      userInfo: 'userInfo'
    })
  },
  mounted () {
    this.name = this.userInfo.name ? this.userInfo.name + '的志愿表' : '志愿表'
  },
  created () {
    this.getData(() => {
      this.analysis()
    })
    for (let i = 1; i <= 99; i++) {
      this.sub.push(i)
    }
  },
  methods: {
    // 批次切换
    tabsChange (msg) {
      this.analysis()
    },
    // 合理化分析
    analysis () {
      this.$refs.refRight.init(this.active)
    },
    // 添加大学/专业
    add (i, value) {
      !value && this.$refs.school.submitdata({enrollBatch: this.active, number: i})
      value && this.$refs.major.submitdata({school: value, enrollBatch: this.active, number: i})
    },
    del (item, index, {id}, i = 0, colleges = '') {
      // 删除的时候，已选专业 - 1
      if (colleges) {
        colleges.majorSelectNumber = colleges.majorSelectNumber > 0 ? colleges.majorSelectNumber - 1 : 0
      }
      this.$set(item, index, {show: false, id: index})
      let _url = [api.delWishCollege, api.delWishMajor]
      this.$axios.post(_url[i], {id: id}).then(data => {
        console.log('删除成功', i)
      }).catch(data => {
        // this.$toast('网络走丢了，请稍后重试！')
      })
      // return !1
    },
    getData (fn) {
      this.$axios.get(api.getWish).then(data => {
        if (this.active === '') this.active = data[0]['enrollBatch']['id']
        console.log('data数据', data)
        this.tabs = []
        let _list = {}
        let _total = 0
        data.length > 0 && data.forEach((item, i) => {
          _total = _total + (item.wishColleges ? item.wishColleges.length : 0)
          // 专业数量
          if (item.wishColleges && item.wishColleges.length > 0) {
            item.wishColleges.forEach((items, j) => {
              items.majorSelectNumber = items.wishMajors.length ? items.wishMajors.length : 0
            })
          }
          _list[item.enrollBatch.id] = item
          this.tabs.push({id: item.enrollBatch.id, name: item.enrollBatch.name})
        })
        this.list = _list
        console.log('_tabs', this.tabs)
        console.log('_list', this.list)

        // 没填任何大学，直接编辑
        console.log('大学数量', _total)
        if (_total === 0) {
          this.isEdit = !1
          this.setData()
        } else {
          !this.isEdit && this.setData()
        }

        fn && fn()
      })
    },
    // 编辑，将数据处理成预期
    setData () {
      for (let index in this.list) {
        let item = this.list[index]
        item.wishColleges && item.wishColleges.forEach(ret => {
          ret.wishMajors = this.setArray(ret.wishMajors, item.majorNumber)
        })
        // 大学数据处理
        item.wishColleges = this.setArray(item.wishColleges, item.collegeNumber)
      }
      console.log('this.list', this.list)
    },
    // 大学/专业数组处理
    setArray (item, num) {
      let _arr = []
      for (let i = 0; i < num; i++) {
        _arr[i] = { show: !1, id: i }
      }
      item && item.forEach(value => {
        this.$set(value, 'show', !0)
        _arr.splice(value.number, 1, value)
      })
      return _arr
    },
    // 上下移动排序
    move (group, sub, changeSub) {
      let _data = group[changeSub]
      this.$set(group, changeSub, group[sub])
      this.$set(group, sub, _data)
    },
    // 保存排序后的大学专业
    save () {
      let params = []
      // 循环批次
      for (let index in this.list) {
        let item = this.list[index]['wishColleges']
        // 循环大学
        item.forEach((college, i) => {
          if (college.show) {
            let _wishColleges = {
              id: college.id,
              probability: college.probability,
              number: i,
              chongShouBao: college.chongShouBao && college.chongShouBao.id,
              enrollBatch: {id: index},
              college: {id: college.college.id},
              wishMajors: []
            }
            // 循环专业
            college.wishMajors.forEach((major, j) => {
              if (major.show) {
                let _wishMajors = {
                  id: major.id,
                  number: j,
                  enrollStudentPlan: {id: major.enrollStudentPlan.id},
                  chongShouBao: major.chongShouBao && major.chongShouBao.id,
                  probability: major.probability
                }
                _wishColleges.wishMajors.push(_wishMajors)
              }
            })
            params.push(_wishColleges)
          }
        })
      }
      this.$axios.post(api.saveWish, params).then(data => {
        this.isEdit = !0
        this.getData()
        console.log('保存成功', data)
      }).catch(data => {
        console.log('保存失败', data)
      })
    }
  }
}
</script>

<style lang='scss'>
  // .main-wrap>.main{
  //   padding: 60px !important;
  //   display: flex;
  //   justify-content: center;
  //   .nuxt-wrap{
  //     width:$containerWidth;
  //     // padding:0px !important;
  //     // background:transparent !important;
  //   }
  // }
</style>
<style lang='scss' scoped>
  // 大学切换位置动画
  .colleges-list-move {
    transition: transform 0.6s;
  }
  // 专业切换位置动画
  .major-list-move {
    transition: transform 0.4s;
  }

  // pdf到处弹窗
  .pdf{
    width: 310px; height: 330px;
    background: $light;
    border-radius:10px;
    padding: 0 28px;
    &-content{
      display: flex;
      flex-direction: column;
      align-items: center;
      height:100%;
      >header{
        width:100%;
        height:80px;
        display:flex;
        align-items:center;
        justify-content: center;
        h3{
          font-weight: normal;
          font-size: 20px;
        }
      }
      >section{
        width:100%;
        flex:1;
        font-size:16px;
        color:#69707F;
        // 填分数，位次
        dl{
          display:flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom:10px;
        }
      }
      >footer{
        width:100%;
        height:110px; text-align:center;
        button{
          width:100%;
          height:50px; line-height:50px;
          border-radius:10px;
          border:none;
          color:#FFF;
          background:$table-b;
          padding:0px;
        }
        span{
          display:inline-block;
          margin-top:12px;
          height:28px; line-height:28px;
          color:$table-b;
          cursor: pointer;
        }
      }
    }
  }

  .volunteer{
    position: relative;
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    // &::after{
    //   content:""; display:block;
    //   position:absolute; left:-10px; top:-10px;
    //   z-index:1;
    //   width:1320px; height:105%;
    //   background:#FAFAFA;
    // }
    /deep/ &-title{
      border-bottom:1px solid $line;
      padding:15px;
      display: flex;
      justify-content:space-between;
      span{
        @extend .block-title;
      }
      ul{
        display: flex;
        li{
          margin-left:15px;
          @extend .block-btn--blue_;
        }
      }
    }
    &-form{
      position: relative; z-index:2;
      padding:0 10px 10px;
      width:930px;
      border-radius:10px;
      background:$light;
      &--content{
        >section{
          // 删除排序按钮
          ol.tool{
            position:absolute;
            right:10px; top:50%; z-index:2;
            transform: translateY(-50%);
            display:flex;
            align-items:center;
            >li{
              span{
                display:inline-block;
              }
              cursor:pointer;
              width:50px; height:50px;
              text-align:center;
              line-height:50px;
              i{
                font-size:20px;
                color:#69707F;
              }
              >.icon-delete{
                color: #FE2828;
              }
            }
          }
          >h3{
            position:relative;
            text-align: center;
            padding:20px 15px;
            // >.title{
            //   @extend .block-title;
            // }
            /deep/ .el-input--suffix .el-input__inner{
              text-align:center;
              width:220px;
              font-size:24px;
              color:#1D1E2C;
            }
            .el-select .el-input__inner{
              height:60px; line-height:60px;

            }
          }
          .null{
            position:relative;
            height:70px;
            border:1px solid $line;
            border-radius: 10px;
            display:flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color:$stable-ad;
            cursor:pointer;
          }
          >ul{
            >li{
              background: $gray-bg;
              border-radius:10px;
              margin-bottom:12px;
              .sub{
                position:absolute;
                top:0; right:0;
                width:100px; text-align:center;
                height:100%; line-height:1.0;
                font-size:72px;
                color:$light;
              }
              dt{
                position:relative;
                align-items:center;
                padding:18px 10px 10px;
                // border-bottom:1px solid $line;
                header{
                  position:relative; z-index:1;
                  display: flex;
                  align-items:center;
                  h4{
                    @extend .block-title,.ell;
                  }
                  hgroup{
                    i{
                      margin-left:15px;
                    }
                  }
                }
                p{
                  color:$stable-ad;
                  font-size:$default-size;
                  margin-top:2px;
                }
              }
              dd{
                .dd-box{
                  position:relative;
                  padding:12px 10px;
                  min-height:45px;
                  border-top:1px solid $line;
                  display: flex;
                  font-size:$default-size;
                  align-items:center;
                  hgroup{
                    >i{margin-left:15px;}
                  }
                }
                .major-null{
                  @extend .dd-box;
                  cursor:pointer;
                  position:relative;
                  span{
                    position: absolute;
                    left:50%; top:50%;
                    transform:translate(-50%,-50%);
                    color:$stable-ad;
                    text-align:center;
                  }
                }
              }
              >.college-null{
                @extend .null;
                border:1px dashed $line;
              }
            }
          }
        }
      }
    }
  }
</style>
